<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.13/dayjs.min.js"></script>
           <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #f5f5f5;
      }
      h1 {
        color: #af4248;
        text-align: center;
      }
      .content {
        width: 600px;

        background: white;
        margin: 0 auto;
      }
      input {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border: 0;
      }
      li {
        padding: 10px;
        box-sizing: border-box;
        list-style: none;
        display: flex;
        justify-content: space-between;
      }
    </style>
  </head>
  <body>
    <h1>记事本</h1>
    <div class="content">
      <input type="text" class="addtext" />
      <ul></ul>
      <div id="page"></div>
    </div>
    <script>
        //配置全局请求信息
        //配置公共域名
     axios.defaults.baseURL = 'http://192.168.0.30:8000/comment';
    //配置公共请求头
    //  axios.defaults.headers.common['Authorization'] = localStorage.getItem('token');
    
    
    // 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    console.log(config);
    config.headers['Authorization']=localStorage.getItem('token')
    
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });



    //添加响应拦截器
     axios.interceptors.response.use(function (response) {
      // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    
    if (response.data.code == 10102) {
      alert(response.data.message)
      window.location.href = '/login.html'
    } 
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });
     
     
     let list = []

        // 删除
        function dellist(id) {
            
        }
        //回车添加
        $('.addtext').keyup(function (e) {
            if (e.keyCode==13) {
                //前置验证
                if(!$(this).val().trim()) return alert('请填写内容')
                //发起添加请求
            axios({
                url:'/add',
                method:'post',
                data:{
                    text:$(this).val()
                }
            }).then(res=>{
                alert(res.data.message)
                //重新获取列表数据
                getdata()
                //清空输入框
                $(this).val('')
            })
                
            }
            
        })

        $('.addtext').keyup(function(e){
            if (e.keyCode==13) {
        
            }
        })
getdata()
//获取列表
function getdata(){
        axios({
            url:'http://192.168.0.30:8000/comment/list',
            method:'post',
            headers:{
                Authorization:localStorage.getItem('token')
            },
            data:{
                pageSize:10,
                pagNum:1
            }
        })
    }
      function setdom() {
        let lis = "";
        list.forEach((item) => {
          lis += `  
                 <li>
            <span>${item.real_name}：</span>
            <span class="itemtext" onclick="edittext('${item.text}',${item.id})">${item.text}</span>
            <span>${item.updatedAt}</span>
            <span onclick="dellist(${item.id})">X</span>
            </li>
                `;
        });
        $("ul").html(lis);
      }
    </script>
  </body>
</html>
